<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>yensdesign.com - How to create a stuning and smooth popup in jQuery</title>
        
        <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
        <script src="js/popup.js" type="text/javascript"></script>


        <style type="text/css">
            html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
            font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
            tfoot, thead, tr, th, td {
                border:0pt none;
                font-family:inherit;
                font-size:100%;
                font-style:inherit;
                font-weight:inherit;
                margin:0pt;
                padding:0pt;
                vertical-align:baseline;
            }
            body{
                background:#fff none repeat scroll 0%;
                line-height:1;
                font-size: 12px;
                font-family:arial,sans-serif;
                margin:0pt;
                height:100%;
            }
            table {
                border-collapse:separate;
                border-spacing:0pt;
            }
            caption, th, td {
                font-weight:normal;
                text-align:left;
            }
            blockquote:before, blockquote:after, q:before, q:after {
                content:"";
            }
            blockquote, q {
                quotes:"" "";
            }
            a{
                cursor: pointer;
                text-decoration:none;
            }
            br.both{
                clear:both;
            }
            #backgroundPopup{
                display:none;
                position:fixed;
                _position:absolute; /* hack for internet explorer 6*/
                height:100%;
                width:100%;
                top:0;
                left:0;
                background:#000000;
                border:1px solid #cecece;
                z-index:1;
            }
            #popupContact{
                display:none;
                position:fixed;
                _position:absolute; /* hack for internet explorer 6*/
                height:384px;
                width:408px;
                background:#FFFFFF;
                border:2px solid #cecece;
                z-index:2;
                padding:12px;
                font-size:13px;
            }
            #popupContact h1{
                text-align:left;
                color:#6FA5FD;
                font-size:22px;
                font-weight:700;
                border-bottom:1px dotted #D3D3D3;
                padding-bottom:2px;
                margin-bottom:20px;
            }
            #popupContactClose{
                font-size:14px;
                line-height:14px;
                right:6px;
                top:4px;
                position:absolute;
                color:#6fa5fd;
                font-weight:700;
                display:block;
            }
            #button{
                text-align:center;
                margin:100px;
            }

        </style>
    </head>
    <body>
        <center>
            <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
            <div id="button"><input type="submit" value="Press me please!" /></div>
        </center>
        
        <div id="popupContact">
            <a id="popupContactClose">x</a>
            <h1>Title of our cool popup, yay!</h1>
            <p id="contactArea">
                Here we have a simple but interesting sample of our new stuning and smooth popup. As you can see jQuery and CSS does it easy...
                <br/><br/>
                We can use it for popup-forms and more... just experiment!
                <br/><br/>
                Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!
                <br/><br/>
                <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
            </p>
        </div>
        <div id="backgroundPopup"></div>
    </body>
</html>
